import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Row,
  Col,
  Card,
  Form,
  Input,
  Select,
  Button,
  Modal,
  Badge,
  Divider,
  Table,
} from 'antd';
import TableList from '@/components/TableList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../search.less';
import moment from 'moment';
const FormItem = Form.Item;
@connect(({ clientMag, loading }) => ({
  clientMag,
  loading: loading.models.clientMag,
}))
@Form.create()
class clientMag extends PureComponent {
  state = {
    modalVisible: false,
    expandForm: false,
    selectedRows: [],
    formValues: {},
    text: {},
    upGradeList: {}
  };

  columns = [
    {
      title: '编码',
      dataIndex: 'terminalCode',
    },
    {
      title: 'MAC地址',
      dataIndex: 'macAddr',
    },

    {
      title: '注册时间',
      dataIndex: 'createTime',
    },

    {
      title: '当前版本',
      dataIndex: 'terminalVersion',
    },

    {
      title: '使用人',
      dataIndex: 'userList',
      width:"20%",
      render: (text) => (
        <div className={styles.colRemark} title={text}>
          {text}
        </div>
      )
    },

    {
      title: '操作',
      render: (text, record) => (
        <Fragment>
          <a onClick={() => this.handleUpgradeListModalVisible(true,record)}>升级记录</a>
        </Fragment>
      ),
    },
  ];

  componentDidMount() {
    this.pageList()
  }

  // 分页查询列表
  pageList(data,pageSize=10,pageNum=0) {
    const { dispatch } = this.props;
    const values = {
      macAddr: data && data.macAddr || '',
      terminalVersion: data && data.terminalVersion || '',
      pageSize: pageSize,
      pageNum: pageNum,
    };
    dispatch({
      type: 'clientMag/queryList',
      payload: values,
    });
  }

  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const {formValues} = this.state;
    // 分页请求
    this.pageList(formValues,pagination.pageSize,pagination.current-1);
  };

  //查询
  handleSearch = e => {
    e.preventDefault();
    const { dispatch, form } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        ...fieldsValue,
      };
      this.setState({
        formValues: values,
      });
      this.pageList(values)
    });
  };
  handleUpgradeListModalVisible = (flag,text) => {
    this.setState({
      upgradeListModalVisible: !!flag,
      text,
    });
    if(flag){
      this.getUpGrade(text)
    }
  };
    //升级记录请求
   getUpGrade= (data,pageSize=10,pageNum=0) => {
    const { dispatch } = this.props;
    const values = {
      terminalNo: data&&data.terminalCode||'',
      pageSize,
      pageNum,
    }
    dispatch({
      type: 'versionMag/upGrade',
      payload: values,
      callback: (res) => {
        if(res.result == "ok") {
          this.setState({
            upGradeList: res.data
          })
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      },
    });
  };

  renderSimpleForm() {
    const {
      form: {getFieldDecorator},
    } = this.props;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem label="MAC地址">
              {getFieldDecorator('macAddr')(<Input placeholder=""/>)}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <FormItem label="当前版本">
              {getFieldDecorator('terminalVersion')(<Input placeholder=""/>)}
            </FormItem>
          </Col>

          <Col md={8} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }

  renderForm() {
    return this.renderSimpleForm();
  }

  render() {
    const {
      clientMag: { data },
      loading,
    } = this.props;
    const { selectedRows, upgradeListModalVisible, text, upGradeList } = this.state;

    const upgradeListMethods = {
      handleUpgradeListModalVisible: this.handleUpgradeListModalVisible,
      getUpGrade: this.getUpGrade.bind(this),
    };

    return (
      <Card bordered={false}>
        <div className={styles.tableList}>
          <div className={styles.tableListForm}>{this.renderForm()}</div>
          <TableList
            selectedRows={selectedRows}
            loading={loading}
            data={data}
            columns={this.columns}
            onChange={this.handleStandardTableChange}
          />
        </div>
        {upgradeListModalVisible?<UpgradeList
          {...upgradeListMethods}
          upgradeListModalVisible={upgradeListModalVisible}
          text={text}
          upGradeList={upGradeList}
        />:null}
      </Card>

    );
  }
}


//升级记录
class UpgradeList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectedRows: [],
    };
  };
  handleStandardTableChange = (pagination, filtersArg, sorter) => {
    const { text, getUpGrade } = this.props;
    // 分页请求
    getUpGrade(text,pagination.pageSize,pagination.current-1);
  };
  handleSelectRows = rows => {
    this.setState({
      selectedRows: rows,
    });
  };
  render() {
    const {
      upgradeListModalVisible,
      handleUpgradeListModalVisible,
      upGradeList,
      text
    } = this.props;
    const {selectedRows} = this.state
    const columns = [
      {
        title: '主机名称',
        dataIndex: 'hostName',
      },
      {
        title: '操作系统',
        dataIndex: 'operatingSystem',
      },
      {
        title: 'MAC地址',
        dataIndex: 'macAddr',
      },
      {
        title: 'IP地址',
        dataIndex: 'ipAddr',
      },
      {
        title: '版本号',
        dataIndex: 'currentTerminalVersion',
      },
      {
        title: '升级日期',
        dataIndex: 'upgradeDate',
        render: (text) => (
        <span>
          {moment(text).format('YYYY-MM-DD HH:mm:ss')}
        </span>
        )
      },
    ];
    return (
      <Modal
        destroyOnClose
        width={1000}
        title="终端升级记录"
        visible={upgradeListModalVisible}
        onCancel={() => handleUpgradeListModalVisible(false)}
        footer={[
          <Button key="back" type="primary" onClick={() => handleUpgradeListModalVisible()}>返回</Button>
        ]}
      >
        <TableList
          selectedRows={selectedRows}
          data={upGradeList}
          columns={columns}
          onSelectRow={this.handleSelectRows}
          onChange={this.handleStandardTableChange}
          hideRowSelection={true}
          rowKey={record => record.id}
          />
      </Modal>
    );
  }
}

export default clientMag;
